<script setup lang="ts">
import { onActivated, onDeactivated, computed } from "vue"
import { ref } from "vue"
import { useRouter } from "vue-router"
import useAppStore from "@/pinia"
const app = useAppStore()

const router = useRouter()
import { i18n } from "@/utils/i18n"
// 计算属性 当前语言
const currentLang = computed(() => {
    return i18n.global.locale
})

const toGame = (id: string) => {
    app.playSound("audio5")
    router.replace({
        path: `/game`,
        query: {
            mode: id,
            type: "single",
        },
    })
}

const toIndex = () => {
    app.playSound("audio3")
    router.replace({
        path: `/`,
    })
}

const list = ref([
    {
        name: "创建房间",
        eName: "CREATE ROOM",
        img: "button3",
    },
    {
        name: "房间列表",
        eName: "ROOM LIST",
        img: "button13",
    },
    {
        name: "多人大乱斗",
        eName: "MULTI BATTLE",
        img: "button9",
    },
    {
        name: "排位对战",
        eName: "RANK BATTLE",
        img: "button6",
    },
])

const handleButton = (index: number) => {
    // 创建房间
    if (index == 0) {
        router.push({
            path: `/room`,
        })
    }
}

onActivated(() => {})

onDeactivated(() => {})
</script>

<template>
    <div class="multiIndex">
        <div class="back flex items-center justify-center" @click="toIndex">BACK</div>
        <div class="list h-full w-full flex flex-wrap">
            <div
                class="item"
                v-for="(i, index) in list"
                :id="i.eName"
                :key="index"
                :class="{ marginBottom: index < 2, marginLeft: (index + 1) % 2 == 0, index0: index == 0, index1: index == 1, index2: index == 2, index3: index == 3 }"
                v-image-cache="i.img"
                @click="handleButton(index)"
            >
                <div class="light-bar light1"></div>
                <div class="light-bar light2"></div>
                <div class="light-bar light3"></div>
                <div class="light-bar light4"></div>
                <div class="main" :class="{ index0: index == 0, index1: index == 1, index2: index == 2, index3: index == 3, zn: currentLang == 'zn' }">
                    <template v-if="index == 0">
                        {{ $t("multi.createRoom") }}
                    </template>
                    <template v-if="index == 1">
                        {{ $t("multi.roomList") }}
                    </template>
                    <template v-if="index == 2">
                        {{ $t("multi.multiBattle") }}
                    </template>
                    <template v-if="index == 3">
                        {{ $t("multi.rankBattle") }}
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.multiIndex {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    .back {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 30vmin;
        border-right: 1px solid rgba(111, 155, 222, 0.1);
        color: hsl(0, 0%, 80%);
        font-size: 5vmin;
        cursor: pointer;
        border-radius: 1.5vmin;
        letter-spacing: 0.5vmin;
        transition: all 0.3s;
        z-index: 2;
        &:hover {
            color: #fff;
            border-right: 1px solid rgba(111, 155, 222, 0.4);
            max-width: 40vmin;
            background-color: rgba(111, 155, 222, 0.3);
            box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.4);
            letter-spacing: 4vmin;
        }
    }

    .list {
        padding: 10vmin 5vmin 10vmin 50vmin;
        z-index: 1;

        .item {
            width: calc((100vw - 70vmin) / 2);
            height: calc((100vh - 20vmin) / 2);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            border-radius: 1vmin;
            transition: all 0.3s;
            opacity: 0.5;

            /* 主题色配置 */
            &.index0 {
                background-size: 100% 100%;
                --theme-color: rgba(0, 247, 255, 0.7);
            }
            &.index1 {
                background-size: 100% 100%;
                --theme-color: rgba(255, 77, 240, 0.7);
            }
            &.index2 {
                background-size: 100% 100%;
                --theme-color: rgba(255, 123, 0, 0.7);
            }
            &.index3 {
                background-size: 100% 100%;
                --theme-color: rgba(212, 255, 0, 0.7);
            }

            /* 四条光带基础样式 */
            .light-bar {
                position: absolute;
                background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
                opacity: 0;
                filter: blur(1px);
                transition: all 0.3s;

                &.light1 {
                    width: 100%;
                    height: 2px;
                    top: 0;
                    left: 0;
                    animation: flow-top 1s linear infinite;
                }
                &.light2 {
                    width: 2px;
                    height: 100%;
                    top: 0;
                    right: 0;
                    animation: flow-right 1s linear infinite;
                    animation-delay: 0.5s;
                }
                &.light3 {
                    width: 100%;
                    height: 2px;
                    bottom: 0;
                    right: 100%;
                    animation: flow-bottom 1s linear infinite;
                    animation-delay: 1s;
                }
                &.light4 {
                    width: 2px;
                    height: 100%;
                    bottom: 100%;
                    left: 0;
                    animation: flow-left 1s linear infinite;
                    animation-delay: 1.5s;
                }
            }

            /* 四条光带动画 */
            @keyframes flow-top {
                0% {
                    left: -100%;
                }
                100% {
                    left: 100%;
                }
            }
            @keyframes flow-right {
                0% {
                    top: -100%;
                }
                100% {
                    top: 100%;
                }
            }
            @keyframes flow-bottom {
                0% {
                    right: -100%;
                }
                100% {
                    right: 100%;
                }
            }
            @keyframes flow-left {
                0% {
                    bottom: -100%;
                }
                100% {
                    bottom: 100%;
                }
            }

            &:hover {
                opacity: 1;
                animation: energyPulse 2s infinite;
                background-size: 110% 110%;
                background-position: 20% 20%;

                @keyframes energyPulse {
                    0% {
                        filter: brightness(100%);
                    }
                    50% {
                        filter: brightness(150%);
                    }
                    100% {
                        filter: brightness(100%);
                    }
                }
                .main {
                    letter-spacing: 1vmin;
                }

                .light-bar {
                    opacity: 1;
                }
            }

            &.marginBottom {
                margin-bottom: 5vmin;
            }

            &.marginLeft {
                margin-left: 10vmin;
            }

            .main {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                padding: 8% 0 0 8%;
                font-size: 6vmin;
                font-weight: 800;
                letter-spacing: 0.5vmin;
                font-family: "title";
                position: relative;
                pointer-events: none;
                background: rgba(0, 0, 0, 0.5);
                opacity: 0.8;
                transition: all 0.3s;
                &.index0 {
                    color: #00f7ff;
                    text-shadow: 0 0 0.2vmin #00f7ff, 0 0 0.4vmin #00a2ff;
                }
                &.index1 {
                    color: #ff4df0;
                    text-shadow: -1px -1px 0 #9c00ff, 1px 1px 0 #ff00a2;
                }
                &.index2 {
                    color: #ff7b00;
                    text-shadow: linear-gradient(to bottom, #ffb700, #ff3c00);
                }
                &.index3 {
                    color: #d4ff00;
                    text-shadow: 0 0 0.2vmin #a8ff00;
                }

                &.zn {
                    font-weight: 200;
                }
            }
        }
    }
}
</style>
